<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="form" v-bind="getFormProps()" class="content">
        <heading grade="1">基本信息</heading>
        <el-form-item label="员工手机："
             prop="phone"
             :rules="[
               { required: true, message: '员工手机不能为空'},
               Object.assign({trigger: 'blur'}, validator.rule.mobile)
             ]">
            <el-input class="normal-input" v-model="form.phone" placeholder="请输入员工手机号码" v-focus></el-input>
        </el-form-item> 
        <el-form-item label="职务角色："
            prop="position"
             :rules="[
               { required: true, message: '职务角色不能为空'},
             ]">         
            <el-select v-model="form.position" placeholder="请选择" @change="handleRoleId">
                    <el-option
                      v-for="item in employee_role_list"
                      :key="item.roleId"
                      :label="item.roleName"
                      :value="item.roleId">
                    </el-option>
            </el-select>
            <el-button  @click="addPosition()">新建职务</el-button>
        </el-form-item> 
        <el-form-item label="权限预览：">            
            <div>
                <a class="link" @click="handleToggle()">
                  {{opened ? '收起' : '查看'}}
                  <i :class="'el-icon-arrow-' + (opened ? 'up' : 'down')" style="font-size: 14px;"></i>
                </a>
                <transition
                  name="bounce"
                  enter-active-class="slideDown"
                  leave-active-class="slideUp"
                >
                <div class="permi-list" v-show="opened">
                <ul>
                  <li class="permi-type" v-for="item in employee_organize_service" :key="item">
                    {{item.serviceName}}
                  </li>
                </ul>
                </div>
                </transition>
            </div>
        </el-form-item>
        <div class="button-box">
          <el-form-item>
            <el-button type="primary" native-type="submit" :loading="loading">{{$route.path=='/employee/add'?'确认新建':'确认修改'}}</el-button>
          </el-form-item>
        </div>
    </el-form>    
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import validator from 'utils/validator'
  import api from 'api/employee'
  import {form} from 'utils/mixins'
  export default {
    mixins: [form],
    data () {
      return {
        validator,
        opened: true,
        loading: false,
        form: {
          phone: '',
          position: ''
        }
      }
    },
    computed: {
      isEdit () {
        return this.$route.path.indexOf('edit') > 0
      },
      ...mapGetters({
        employee_role_list: 'employee_role_list',
        employee_edit: 'employee_edit',
        employee_organize_service: 'employee_organize_service',
        message_unread: 'message_unread'
      })
    },
    mounted () {
      this.$store.dispatch('employee_role_list') // 获取该组织职务角色列表
      this.$store.dispatch('employee_organize_service', {roleId: this.form.position})  // 获取该roleId权限列表
      if (this.$route.path === '/employee/edit') {
        this.$store.dispatch('employee_edit', {userId: this.$route.query.userId})  // 获取修改角色信息
      }
    },
    watch: {
      employee_edit (value) {
        if (this.$route.path === '/employee/edit') {
          this.form.phone = value.phone
          this.form.position = value.roleId
        }
      }
    },
    methods: {
      handleToggle () {
        this.opened = !this.opened
      },
      handleRoleId (value) {
        this.form.position = value
        this.$store.dispatch('employee_organize_service', {roleId: this.form.position})
      },
      addPosition () {
        this.$router.push('AddPosition')
      },
      submit () {
        if (this.$route.path === '/employee/add') {
          api.create({ // 新增员工接口
            roleId: this.form.position,
            phone: this.form.phone
          }, {context: this, successMsg: '添加成功'}).then(res => {
            this.$router.push('/employee')  // 跳转到员工管理页面
            if (!localStorage.getItem('auth_orgId')) {
              this.$store.dispatch('message_unread', {authOrgId: localStorage.getItem('htxk_userId')})
            }
          })
        } else {
          api.editRole({ // 修改角色信息
            roleId: this.form.position,
            userId: this.$route.query.userId
          }, {context: this, successMsg: '修改成功'}).then(res => {
            this.$router.push('/employee')  // 跳转到员工管理页面
          })
        }
      }
    }
  }
</script>
<style scoped lang="scss">
.permi-list {
  border: 1px solid #e5e5e5;
  text-align: center;
  padding: 5px;
  width: 668px;
  height: 50px;
}

.permi-type {
  margin: 0 5px;
  float:left;
}

.link {
  cursor: pointer
}

</style>
